<template>
<div class="wrap">
	<div class="top">
		<span>地址管理</span>
	    <button @click="setaddress">添加新地址</button>
	</div>
	<table align='center' style="border-collapse:collapse;">
			<tr class="title"><th>收货人</th><th>所在地区</th><th>街道地址</th><th>联系电话</th><th>备注</th><th>操作</th></tr>
			<tr class="content" v-for="(item,index) in news" ><td>{{item.name}}</td><td>{{item.areas}}</td><td>{{item.address}}</td><td>{{item.phone}}</td><td>{{item.note}}</td><td @click="remove(index)"><i>{{item.defaults}}</i><i>{{item.change}}</i> {{item.delete}}</td></tr>
	</table>
</div>
</template>

<script>
	export default{
		name:"adressmanagement",
		data(){
			return{
				news:[{name:"张强强",areas:"北京 北京市 朝阳区",address:"朝阳奥运媒体村(北苑天畅园 C3-2506室",phone:18331205623,note:"家庭地址",defaults:"",change:"修改",delete:"删除"},{name:"张强强",areas:"北京 北京市 朝阳区",address:"朝阳奥运媒体村(北苑天畅园 C3-2506室",phone:18331205623,note:"家庭地址",defaults:"设为默认地址",change:"修改",delete:"删除"},{name:"张永强",areas:"北京 北京市 朝阳区",address:"朝阳奥运媒体村(北苑天畅园 C3-2506室",phone:18331205623,note:"家庭地址",defaults:"设为默认地址",change:"修改",delete:"删除"},{name:"张永强",areas:"北京 北京市 朝阳区",address:"朝阳奥运媒体村(北苑天畅园 C3-2506室",phone:18331205623,note:"家庭地址",defaults:"设为默认地址",change:"修改",delete:"删除"},{name:"张永强",areas:"北京 北京市 朝阳区",address:"朝阳奥运媒体村(北苑天畅园 C3-2506室",phone:18331205623,note:"家庭地址",defaults:"设为默认地址",change:"修改",delete:"删除"},{name:"张永强",areas:"北京 北京市 朝阳区",address:"朝阳奥运媒体村(北苑天畅园 C3-2506室",phone:18331205623,note:"家庭地址",defaults:"设为默认地址",change:"修改",delete:"删除"},{name:"张永强",areas:"北京 北京市 朝阳区",address:"朝阳奥运媒体村(北苑天畅园 C3-2506室",phone:18331205623,note:"家庭地址",defaults:"设为默认地址",change:"修改",delete:"删除"},{name:"张永强",areas:"北京 北京市 朝阳区",address:"朝阳奥运媒体村(北苑天畅园 C3-2506室",phone:18331205623,note:"家庭地址",defaults:"设为默认地址",change:"修改",delete:"删除"}],
				addr:{name:"张永强",areas:"北京 北京市 朝阳区",address:"朝阳奥运媒体村(北苑天畅园 C3-2506室",phone:18331205623,note:"家庭地址",defaults:"设为默认地址",change:"修改",delete:"删除"},
			}
		},
		methods:{
			remove:function(index){
				console.log(index);
				this.news.splice(index,1);
				//console.log(this.news.splice(index,1));
			},
			setaddress:function(indx){
				//this.news.unshift(this.news.splice(index,1));
				//this.news.push(this.addr);
			}
		}
	}
</script>

<style scoped>
.wrap{
	width: 1085px;
	min-height: 623px;
	border: 1px solid rgb(242,242,242);	
}
.top{
	font-weight: 200;
	font-size: 18px;
	color: rgb(70,70,70);
	text-indent: 22px;
	line-height: 58px;
	border-bottom: 1px solid rgb(242,242,242);	
}
.top>button{
	display: inline-block;
	width: 90px;
	height: 30px;
	background-color: rgb(61,142,67);
	color: white;
	font-size: 16px;
	border-radius: 5px;
	border: none;
	margin-left: 874px;
	font-weight: 100;
}
table{
	margin: 21px;
	border: 1px solid  rgb(242,242,242);
	width: 1040px;
	outline: none;
}
.title{
	background-color: rgb(242,242,242);
	color: rgb(123,123,123);
	line-height: 42px;
	font-weight: 100;
}
th{
	font-size: 16px;
}
.content{
	line-height: 52px;
	border-bottom: 1px solid  rgb(242,242,242);
}
td{
	font-size: 14px;	
	text-align: center;
	color: rgb(123,123,123);
}
.content>td:last-child{
	color: rgb(121,181,121);
}
.content:hover{
	background-color: rgb(243,255,243);
}
.content i{
	display: inline-block;
	line-height: 14px;
	font-style: normal;
	border-right: 1px solid rgb(123,123,123);
	padding: 0 5px;
}
.content i:first-child{
	color: rgb(250,175,99);
}
</style>